/*
 * @Author: wwssaabb
 * @Date: 2021-12-02 14:59:56
 * @LastEditTime: 2021-12-02 16:48:46
 * @FilePath: \handwritten-code\vue\array.js
 */

/* 
  数组的观测，重写了数组的七种方法（能改变数组自身的方法）
  push、pop、shift、unshift、reserve、sort、splice
*/

//先保留数组的原型
const arrayProto = Array.prototype

//以数组原型为原型，创建一个对象,面向切片编程思想（AOP），不破坏封装前提进行动态的扩展
export const arrayMethods = Object.create(arrayProto)

let methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'reverse',
  'sort',
  'splice',
]

methodsToPatch.forEach((method) => {
  arrayMethods[method] = function (...args) {
    //保留原来的方法执行结果
    const result = arrayProto[method].apply(this, args)

    //关键，this代表的是数据本身,__ob__表示已经处理过的响应式数据
    const ob = this.__ob__

    // 这里的标志就是代表数组有新增操作
    let inserted;
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args;
        break;
      case 'splice':
        inserted = args.slice(2); //拿到新增的参数，前两个是替换的位置和长度
      default:
        break;
    }

    if (inserted) ob.observeArray(inserted)

    //ob.dep.notify() //通知更新
    return result
  }
})


